import React, { useEffect, useState } from "react";
import styles from "./Index.module.css";
import { Avatar, Tabs } from "antd-mobile";
import { SideBar } from "antd-mobile";
import instance from "../../api/request";
import { useNavigate } from "react-router-dom";
import Mynav from "../../components/Mynav/Index";
function Index() {
  const nav = useNavigate();
  // 列表症状
  const [list, setList] = useState([]);
  //对应病症
  const [dui, setDui] = useState([]);
  const [departmentId, setDepartmentId] = useState(2);

  //药类分别
  const [yao, setYao] = useState([]);

  //对应药品
  const [yaoList, setYaoList] = useState([]);
  const [drugsCategoryId, setDrugsCategoryId] = useState(1);
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(5);

  const getlist = () => {
    instance.get("/api/share/knowledgeBase/v1/findDepartment").then((res) => {
      console.log(res);
      setList(res.data.result);
    });
  };

  const getdui = () => {
    instance
      .get("/api/share/knowledgeBase/v1/findDiseaseCategory", {
        params: {
          departmentId: departmentId,
        },
      })
      .then((res) => {
        console.log(res, "======对应数据");
        setDui(res.data.result);
      });
  };

  const getyao = () => {
    instance
      .get("/api/share/knowledgeBase/v1/findDrugsCategoryList")
      .then((res) => {
        console.log(res, "=====药品数据");
        setYao(res.data.result);
      });
  };

  const getYaoList = () => {
    instance
      .get("/api/share/knowledgeBase/v1/findDrugsKnowledgeList", {
        params: {
          drugsCategoryId: drugsCategoryId,
          page: page,
          count: count,
        },
      })
      .then((res) => {
        console.log(res, "=====药品列表数据");
        setYaoList(res.data.result);
      });
  };

  useEffect(() => {
    getlist();
    getyao();
  }, []);

  useEffect(() => {
    getdui();
  }, [departmentId]);

  useEffect(() => {
    getYaoList();
  }, [drugsCategoryId]);

  return (
    <div className={styles.zong}>
      <Mynav/>

      <div className={styles.tab}>
        <Tabs>
          <Tabs.Tab title="常见病症" key="fruits">
            <div className={styles.bing}>
              <div className={styles.ce}>
                <SideBar onChange={(key) => setDepartmentId(Number(key))}>
                  {list.map((item, index) => (
                    <SideBar.Item key={item.id} title={item.departmentName} />
                  ))}
                </SideBar>
              </div>

              <div className={styles.zuozi}>
                {dui.map((item, index) => {
                  return (
                    <div
                      className={styles.zi}
                      key={index}
                      onClick={() =>
                        nav(`/bingdetail/${item.id}?title=${item.name}`)
                      }
                    >
                      {item.name}
                    </div>
                  );
                })}
              </div>
            </div>
          </Tabs.Tab>

          <Tabs.Tab title="常用药品" key="vegetables">
            <div className={styles.yao}>
              <div className={styles.ce1}>
                <SideBar onChange={(key) => setDrugsCategoryId(Number(key))}>
                  {yao.map((item, index) => (
                    <SideBar.Item key={item.id} title={item.name} />
                  ))}
                </SideBar>
              </div>

              <div className={styles.zuozi1}>
                {yaoList.map((item) => {
                  return (
                    <div key={item.id} onClick={({key})=>nav(`/yaodetail/${item.id}?title=${item.name}`)}>
                      <div>
                        <img src={item.picture} alt="" />
                      </div>
                      

                      <div className={styles.zi1}>{item.name}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

export default Index;
